<template>
    <v-container>
        <el-form :model="formData" label-width="auto" ref="formRef">
            <el-row>
            <el-col :span="12">

            <el-form-item 
            v-for="obj in formData"
            :key="obj.label"
            :label="obj.label"
            :prop="obj.name"
            >
                <!-- 循环配置项 -->
                <el-input  
                v-if="obj.ktype === 'input'"
                v-model="formData[obj.name]"
                :placeholder="obj.label"
                :type="obj.ktype"
                :style="obj.styleSet"
                :required="obj.required"
                :disabled="obj.disabled"
                />

                <el-input
                v-if="obj.ktype ==='textarea'"
                v-model="formData[obj.name]"
                :placeholder="obj.label"
                :type="obj.ktype"
                :style="obj.styleSet"
                :required="obj.required"
                :disabled="obj.disabled"
                :autosize="{ minRows: 4 }"
                />
                
                <!-- 下拉选项 -->
                <el-select 
                v-if="obj.ktype=='select'" 
                v-model="formData[obj.name]" 
                :placeholder="obj.label"
                :style="obj.styleSet"
                :required="obj.required"
                >
                    <el-option
                    v-for="optObj in obj.options"
                    :key="optObj.index"
                    :value="optObj.value"
                    :label="optObj.label"
                    :disabled="optObj.disabled"
                    />
                </el-select>

                <!-- 时间选取 -->
                <el-date-picker
                v-if="obj.ktype === 'datePicker'"
                v-model="formData[obj.name]"
                :style="obj.styleSet"
                :required="obj.required"
                />

                <!-- switch展示 -->
                <el-switch 
                v-if="obj.ktype==='switch'" 
                v-model="formData[obj.name]"
                v-bind:is="true"
                active-text="启用"
                inactive-text="禁用"
                :active-value="1"
                :inactive-value="0"
                :style="obj.styleSet"
                :required="obj.required"
                />

            </el-form-item>
            
            </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">save</el-button>
                <el-button type="default" @click="() => { router.back() }">cannel</el-button>
            </el-form-item>

        </el-form>
    </v-container>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router'

let props = defineProps({
    formSet: { type: Object },
    formData: { type: Object },
    rules: { type: Array }
})
        
let saveData = ref({})
let formData = ref(props.formData)

let emit = defineEmits(['saveData'])

function onSubmit() {
    // 将提交后的数据传递给父组件，在父组件在使用本组件时，将不再需要对传递后的数据进行二次处理
    // console.log("submit data", formData.value)
    for (var i=0;i<Object.keys(formData.value).length; i++){
        if (typeof(formData.value[Object.keys(formData.value)[i]]) != "object"){
            saveData[Object.keys(formData.value)[i]] = formData.value[Object.keys(formData.value)[i]]
        }
    }
    // console.log("进入更新逻辑", saveData);
    emit('saveData', saveData);
}

</script>

<style scoped>
.v-container {
    /* border: 0.3px solid; */
    position: fixed;
    /* text-align: center; */
    left: 12%;
    top: 130px;
    justify-content: center; 
}
.el-form-item{
    width: 500px;
    max-width: auto;
    min-height: 45px;
    max-height: auto;
}
</style>